<template>
    <el-tabs type="border-card">
        <el-tab-pane>
            <template #label>
                待转正
            </template>
            <el-card class="dzz_tip_bar">
                <el-row> 
                    <el-col :span="1">
                        <el-icon :size="20" color="#d87e29">
                            <Warning />
                        </el-icon>
                    </el-col>
                    <el-col :span="22">
                        提醒:有 <span class="tipNum">{{state.waitTurnRegular_Data.length}}</span>
                        名员工已到转正提醒日期，请尽快处理 
                        <span class="settingnotice">设置提醒</span>
                    </el-col>
                    <el-col :span="1" class="mgright">
                        <el-icon :size="20" color="#d87e29">
                            <Close />
                        </el-icon>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="menu_bar">
                <el-button icon="ele-Download" > 批量导出 </el-button>
                <el-button icon="ele-Position" > 批量提交审批 </el-button>
                <el-button type="primary" icon="ele-Select"> 批量确认转正 </el-button>
            </el-card>
            <el-card class="full-table" shadow="hover" style="width:100%;">
                <el-table :data="state.waitTurnRegular_Data" style="width: 100%" max-height="300" >
                    <el-table-column type="selection" width="55" /> 
                    <el-table-column prop="jobNum" label="工号" width="80" />
                    <el-table-column prop="realName" label="姓名" width="80" />
                    <el-table-column prop="orgName" label="部门" width="200" />
                    <el-table-column prop="posTitle" label="职位" width="100" />
                    <el-table-column prop="joinDate" label="入职日期" width="120">
                        <template #default="scope">
                            {{ formatDate(new Date(scope.row.joinDate), 'YYYY-mm-dd') }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="dqDate" label="试用到期日" width="140" />
                    <el-table-column prop="spState" label="转正审批" width="100">
                        <template #default="scope">
                            <el-tag type="primary" v-if="scope.row.spState === 2"> 审批中 </el-tag>
                            <span v-if="scope.row.spState === 0"> 待审批 </span>
                            <el-tag type="danger" v-if="scope.row.spState === 3"> 已拒绝 </el-tag>
							<el-tag type="success" v-if="scope.row.spState === 1"> 审批已通过 </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Status" label="状态" width="100">
                        <template #default="scope">
                            <span v-if="scope.row.status === 0"> 正常 </span>
                            <el-tag type="success" v-if="scope.row.status === 1"> 已转正 </el-tag>
                            <el-tag type="danger" v-if="scope.row.status === 2"> 延期 </el-tag> 
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注"/>
                </el-table>
            </el-card>
        </el-tab-pane>
        <el-tab-pane label="已转正"> 
            <el-card shadow="hover" class="tabSearch_Bar" :body-style="{ paddingBottom: '0' }">
                <TableSearch :search="tb.tableData.search" @search="onSearch" />
            </el-card>
            <el-card class="full-table" shadow="hover" style="margin-top: 8px">
                <Table ref="tableRef" v-bind="tb.tableData" :getData="getyzzData">
                    <template #command> 
                        <el-button icon="ele-Printer" type="primary" v-auth="'sysUser:add'"> 合同打印 </el-button> 
                    </template>
                    <template #sex="scope">
                        <el-tag type="success" v-if="scope.row.sex === 1"> 男 </el-tag>
                        <el-tag type="danger" v-else> 女 </el-tag>
                    </template>
                    <template #orgName="scope">
                        {{scope.row.sysOrg.name}}
                    </template> 
                    <template #joinDate="scope">
                        {{ formatDate(new Date(scope.row.joinDate), 'YYYY-mm-dd') }}
                    </template>
                    <template #turnDate="scope">
                        {{ formatDate(new Date(scope.row.turnDate), 'YYYY-mm-dd') }}
                    </template>
                    <template #age="scope">
                        {{ frmatYear(new Date(scope.row.birthday)) }}
                    </template>
                    <template #status="scope">
                        <el-tag type="success" v-if="scope.row.status === 1"> 在职 </el-tag>
                        <el-tag type="danger" v-else> 离职 </el-tag>
                    </template>
                </Table>
            </el-card>
        </el-tab-pane> 
    </el-tabs>
</template>
<style>
    .menu_bar{
        width: 100%;
        border-width: 0px;
    }
    .menu_bar.el-card.is-always-shadow{
        box-shadow:none;
    }
    .menu_bar .el-card__body{
        padding: 5px 0px;
    }
    .dzz_tip_bar{
        width: 100%; 
        border-radius: 0px;
        background-color: rgba(247, 231, 179, 0.6);
        border:solid 1px #f5be49
    }
    .dzz_tip_bar .el-card__body{
        padding: 5px 20px;
    }
    .dzz_tip_bar .el-col{
        line-height: 23px;
        height: 23px;
        color: #666666;
    }
    .dzz_tip_bar .tipNum{
        color:rgb(243, 21, 21);
        font-weight: bold;
    }
    .mgright{
        text-align: right;
    }
    .mgright i{
        cursor: pointer;
    }
    .mgright i:hover{
        color: red;
    }
    .settingnotice{
        color: #306cda;
        text-decoration: underline;
        cursor: pointer;
        padding-left: 15px;
    }
    .settingnotice:hover{
        color: #035191;
    }
</style>
<script lang="ts" setup name="turnRegular">
    import { onMounted, reactive, ref,defineAsyncComponent,nextTick } from 'vue';
    import { formatDate,frmatYear } from '/@/utils/formatTime';
    import { Timer, Close,Warning } from '@element-plus/icons-vue'
    import { auth } from '/@/utils/authFunction';

    // 引入组件
    const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
    const TableSearch = defineAsyncComponent(() => import('/@/components/table/search.vue'));
    const tableRef = ref<RefType>();

    const state = reactive({
        waitTurnRegular_Data:[
            {
                "realName": "孙彩丽",
                "nickName": "孙彩丽",
                
                "sex": 2,
                "age": 0,
                "birthday": "2003-06-22 00:00:00",
                "nation": "汉族",
                "phone": "15201171471",
                "cardType": 0,
                "idCardNum": "12345678900123122",
                
                "address": "湖北省荆门市",
                
                "orderNo": 1, 
                "remark": null,
                "accountType": 0,
                "orgId": 1300000000101,
                "orgName":"鹰美（荆门）制衣有限公司",
                "posId": 1300000000102,
                "jobNum": "600305",
                "posLevel": "L5",
                "posTitle": "董事长",
                "expertise": null,
                "officeZone": null,
                "office": null,
                "joinDate": "2023-04-15",
                "signature": null,
                "id": 13392500277061,
                "dqDate":"2023-07-15",
                "spState":2,
                "status":0,
            },
            {
                "realName": "张三",
                "nickName": "张三",
                
                "sex": 1,
                "age": 0,
                "birthday": "1986-01-11 00:00:00",
                "nation": "汉族",
                "phone": "18020030720",
                "cardType": 0,
                "idCardNum": null,
                
                "address": null,
                
                
                
                
                
                
                
                
                "orderNo": 100, 
                "accountType": 1,
                "orgId": 1300000000102,
                "orgName":"企划部",
                "posId": 1300000000108,
                "jobNum": "600301",
                "posLevel": "L3",
                "posTitle": "主任",
                "expertise": null,
                "officeZone": null,
                "office": null,
                "joinDate": "2023-04-15",
                "signature": null,
                "id": 1300000000112,
                "dqDate":"2023-07-15",
                "spState":2,
                "status":0,
            },
            {
                "realName": "李四",
                "nickName": "李四",
                
                "sex": 1,
                "age": 0,
                "birthday": "1976-04-05 00:00:00",
                "nation": "汉族",
                "phone": "18020030720",
                "cardType": 0,
                "idCardNum": null,
                
                "address": null,
                
                
                
                
                
                
                
                
                "orderNo": 100, 
                "accountType": 1,
                "orgId": 1300000000103,
                "orgName": "生产部",
                "posId": 1300000000108,
                "jobNum": "600302",
                "posLevel": "L3",
                "posTitle": "主任",
                "expertise": null,
                "officeZone": null,
                "office": null,
                "joinDate": "2023-04-22",
                "signature": null,
                "id": 1300000000113,
                "dqDate":"2023-07-22",
                "spState":3,
                "status":2,
                "remark":"考核未通过,应员工本人要求延长试用考核",
            },
            {
                "realName": "王五",
                "nickName": "王五",
                
                "sex": 1,
                "age": 0,
                "birthday": "1979-06-23 00:00:00",
                "nation": "苗族",
                "phone": "18020030720",
                "cardType": 0,
                "idCardNum": null,
                
                "address": null,
                
                
                
                
                
                
                
                
                "orderNo": 100, 
                "remark": null,
                "accountType": 1,
                "orgId": 1300000000104,
                "orgName": "财务部",
                "posId": 1300000000115,
                "jobNum": "600303",
                "posLevel": "L1",
                "posTitle": "职员",
                "expertise": null,
                "officeZone": null,
                "office": null,
                "joinDate": "2023-05-25",
                "signature": null,
                "id": 1300000000114,
                "dqDate":"2023-08-25",
                "spState":0,
                "status":0,
        }],//待转正列表
    });

    const tb = reactive<TableDemoState>({
        tableData: {
            // 表头内容（必传，注意格式）
            columns: [
                { type: 'index', width:50, label: '序号',fixed:'left',align: 'left', isCheck: true },
                { prop: 'jobNum', width:90, label: '工号',fixed:'left',align: 'left', sortable: 'custom', isCheck: true },
                { prop: 'realName', width: 90, label: '姓名',fixed:'left', align: 'left',  sortable: 'custom', isCheck: true },		
                { prop: 'orgName', width: 100, label: '部门',fixed:'left', align: 'left', isCheck: true,'show-overflow-tooltip':true, hideCheck: true},		
                { prop: 'joinDate', width: 90, label: '入职日期', align: 'left',  sortable: 'custom', isCheck: true },		
                { prop: 'turnDate', width: 90, label: '转正日期', align: 'left',  sortable: 'custom', isCheck: true },		
                { prop: 'liftYear', width: 90, label: '合同年限', align: 'left',  sortable: 'custom', isCheck: true },		
                { prop: 'sex', width: 60, label: '性别', align: 'left', isCheck: true },		
                { prop: 'status', width: 60, label: '状态', align: 'left',isCheck: true },		
                { prop: 'posLevel', width: 60, label: '职级', align: 'left', isCheck: true },		
                { prop: 'posTitle', width: 90, label: '职称', align: 'left',  isCheck: true },		
                { prop: 'nation', width: 90, label: '民族', align: 'left', isCheck: true },		
                { prop: 'remark', label: '备注', align: 'left', isCheck: true },
            ],
            // 配置项（必传）
            config: {
                isStripe: false, // 是否显示表格斑马纹
                isBorder: true, // 是否显示表格边框
                isSerialNo: false, // 是否显示表格序号
                isSelection: true, // 是否勾选表格多选 
                showSelection: auth('sysUser:delete'), //是否显示表格多选
                pageSize: 10, // 每页条数
                hideExport: false, //是否隐藏导出按钮 
                hidePrint:false,//是否隐藏打印按钮
                exportFileName: '员工资料', //导出报表的文件名，不填写取应用名称
            },
            // 搜索表单，动态生成（传空数组时，将不显示搜索，type有3种类型：input,date,select）
            search: [
                { label: '工号', prop: 'jobNum', placeholder: '搜索工号', required: false, type: 'input' },
                { label: '姓名', prop: 'realName', placeholder: '搜索姓名', required: false, type: 'input' },
                { label: '手机号码', prop: 'phone', placeholder: '搜索手机号码', required: false, type: 'input' },
            ],
            param: {
                orgId: -1,
                jobNum: undefined,
                realName: undefined,
                phone: undefined,
            },
            defaultSort: {
                prop: 'orderNo',
                order: 'ascending',
            },
            customPrintFun:function(_param:any,_data:any){
                console.log("===================================AAAAA");
            }
        },
    });
    // 搜索点击时表单回调
    const onSearch = (data: EmptyObjectType) => {
        tb.tableData.param = Object.assign({}, tb.tableData.param, { ...data });
        nextTick(() => {
            tableRef.value.pageReset();
        });
    };
    
    const getyzzData = (param: any,) => {
        return new Promise(function(resolve, reject){ 
            setTimeout(function(){
                let tempData={code: 200,extras: null,message: "",type:"success",result:{
                    "page": 1,
                    "pageSize": 10,
                    "total": 12,
                    "totalPages": 2,
                    "items": [
                        {
                        "realName": "孙彩丽",
                        "nickName": "孙彩丽",
                        "sex": 2,
                        "age": 0,
                        "joinDate":"2003-03-22 00:00:00",
                        "turnDate":"2003-06-22 00:00:00",
                        "liftYear":"1",
                        "nation": "汉族",
                        "phone": "15201171471",
                        "cardType": 0,
                        "idCardNum": "12345678900123122",
                        "address": "湖北省荆门市",
                        "orderNo": 1,
                        "status": 1,
                        "remark": null,
                        "accountType": 0,
                        "orgId": 1300000000101,
                        "sysOrg": {
                            "pid": 0,
                            "name": "鹰美（荆门）制衣有限公司",
                            "code": "1001",
                            "orgType": "101",
                            "orderNo": 100,
                            "remark": "大名科技",
                        },
                        "posId": 1300000000102,
                        "jobNum": "600305",
                        "posLevel": "L5",
                        "posTitle": "董事长",
                        "id": 13392500277061
                        },
                        {
                        "realName": "张三",
                        "nickName": "张三",
                        "sex": 1,
                        "age": 0,
                        "joinDate": "2023-03-11 00:00:00",
                        "turnDate":"2003-06-12 00:00:00",
                        "liftYear":"3",
                        "nation": "汉族",
                        "phone": "18020030720",
                        "cardType": 0,
                        "idCardNum": null,
                        "address": null,
                        "orderNo": 100,
                        "status": 1,
                        "remark": null,
                        "accountType": 1,
                        "orgId": 1300000000102,
                        "sysOrg": {
                            "pid": 1300000000101,
                            "name": "企划部",
                            "code": "100101",
                            "orgType": "301",
                            "orderNo": 100,
                            "remark": "市场部",
                        },
                        "posId": 1300000000108,
                        "jobNum": "600301",
                        "posLevel": "L3",
                        "posTitle": "主任",
                        "id": 1300000000112
                        },
                        {
                        "realName": "李四",
                        "nickName": "李四",
                        
                        "sex": 1,
                        "age": 0,
                        "joinDate": "2023-04-05 00:00:00",
                        "turnDate":"2003-07-05 00:00:00",
                        "liftYear":"1",
                        "nation": "汉族",
                        "phone": "18020030720",
                        "cardType": 0,
                        "idCardNum": null,
                        "address": null,
                        "orderNo": 100,
                        "status": 1,
                        "remark": null,
                        "accountType": 1,
                        "orgId": 1300000000103,
                        "sysOrg": {
                            "pid": 1300000000101,
                            "name": "生产部",
                            "code": "100102",
                            "orgType": "301",
                            "orderNo": 100,
                            "remark": "研发部",
                            "id": 1300000000103
                        },
                        "posId": 1300000000108,
                        "jobNum": "600302",
                        "posLevel": "L3",
                        "posTitle": "主任",
                        "id": 1300000000113
                        },
                        {
                        "realName": "王五",
                        "nickName": "王五",
                        "sex": 1,
                        "age": 0,
                        "joinDate": "2023-03-23 00:00:00",
                        "turnDate":"2003-06-23 00:00:00",
                        "liftYear":"1",
                        "nation": "苗族",
                        "phone": "18020030720",
                        "cardType": 0,
                        "idCardNum": null,
                        "address": null,
                        "orderNo": 100,
                        "status": 1,
                        "remark": null,
                        "accountType": 1,
                        "orgId": 1300000000104,
                        "sysOrg": {
                            "pid": 1300000000101,
                            "name": "财务部",
                            "code": "100103",
                            "orgType": "301",
                            "orderNo": 100,
                            "remark": "财务部",
                            "id": 1300000000104
                        },
                        "posId": 1300000000115,
                        "jobNum": "600303",
                        "posLevel": "L1",
                        "posTitle": "职员",
                        "id": 1300000000114
                        },
                        {
                        "realName": "测试用户",
                        "nickName": "测试用户",
                        "sex": 2,
                        "age": 0,
                        "joinDate": "2023-03-13 00:00:00",
                        "turnDate":"2003-06-13 00:00:00",
                        "liftYear":"2",
                        "nation": "汉族",
                        "phone": "18020030720",
                        "cardType": 0,
                        "idCardNum": null,
                        "address": null,
                        "orderNo": 100,
                        "status": 1,
                        "remark": null,
                        "accountType": 0,
                        "orgId": 1300000000104,
                        "sysOrg": {
                            "pid": 1300000000101,
                            "name": "财务部",
                            "code": "100103",
                            "orgType": "301",
                            "orderNo": 100,
                            "remark": "财务部",
                            "id": 1300000000104
                        },
                        "posId": 1300000000116,
                        "jobNum": "600304",
                        "posLevel": "E2",
                        "posTitle": "其他",
                        "id": 1300000000115
                        },
                        {
                        "realName": "测试用户",
                        "nickName": "测试用户",
                        "sex": 2,
                        "age": 0,
                        "joinDate": "2023-03-13 00:00:00",
                        "turnDate":"2003-06-13 00:00:00",
                        "liftYear":"3",
                        "nation": "汉族",
                        "phone": "18020030720",
                        "cardType": 0,
                        "idCardNum": null,
                        "address": null,
                        "orderNo": 100,
                        "status": 1,
                        "remark": null,
                        "accountType": 0,
                        "orgId": 1300000000104,
                        "sysOrg": {
                            "pid": 1300000000101,
                            "name": "财务部",
                            "code": "100103",
                            "orgType": "301",
                            "orderNo": 100,
                            "remark": "财务部",
                            "status": 1,
                            "id": 1300000000104
                        },
                        "posId": 1300000000116,
                        "jobNum": "600306",
                        "posLevel": "E2",
                        "posTitle": "其他",
                        "id": 1300000000116
                        },
                        {
                        "realName": "测试用户",
                        "nickName": "测试用户",
                        "sex": 2,
                        "age": 0,
                        "joinDate": "2023-03-13 00:00:00",
                        "turnDate":"2003-06-13 00:00:00",
                        "liftYear":"1",
                        "nation": "汉族",
                        "phone": "18020030720",
                        "cardType": 0,
                        "idCardNum": null,
                        "address": null,
                        "orderNo": 100,
                        "status": 1,
                        "remark": null,
                        "accountType": 0,
                        "orgId": 1300000000104,
                        "sysOrg": {
                            "pid": 1300000000101,
                            "name": "财务部",
                            "code": "100103",
                            "orgType": "301",
                            "orderNo": 100,
                            "remark": "财务部",
                            "id": 1300000000104
                        },
                        "posId": 1300000000116,
                        "jobNum": "600307",
                        "posLevel": "E2",
                        "posTitle": "其他",
                        "id": 1300000000117
                        },
                        {
                        "realName": "测试用户",
                        "nickName": "测试用户",
                        "sex": 2,
                        "age": 0,
                        "joinDate": "2023-03-13 00:00:00",
                        "turnDate":"2003-06-13 00:00:00",
                        "liftYear":"2",
                        "nation": "汉族",
                        "phone": "18020030720",
                        "cardType": 0,
                        "idCardNum": null,
                        "address": null,
                        "orderNo": 100,
                        "status": 1,
                        "remark": null,
                        "accountType": 0,
                        "orgId": 1300000000104,
                        "sysOrg": {
                            "pid": 1300000000101,
                            "name": "财务部",
                            "code": "100103",
                            "orgType": "301",
                            "orderNo": 100,
                            "remark": "财务部",
                            "id": 1300000000104
                        },
                        "posId": 1300000000116,
                        "jobNum": "600308",
                        "posLevel": "E2",
                        "posTitle": "其他",
                        },
                        {
                        "realName": "用户09",
                        "nickName": "用户09",
                        "sex": 2,
                        "age": 0,
                        "joinDate": "2023-03-13 00:00:00",
                        "turnDate":"2003-06-13 00:00:00",
                        "liftYear":"2",
                        "nation": "汉族",
                        "phone": "18020030720",
                        "cardType": 0,
                        "idCardNum": null,
                        "address": null,
                        "orderNo": 100,
                        "status": 1,
                        "remark": null,
                        "accountType": 0,
                        "orgId": 1300000000104,
                        "sysOrg": {
                            "pid": 1300000000101,
                            "name": "财务部",
                            "code": "100103",
                            "orgType": "301",
                            "orderNo": 100,
                            "remark": "财务部",
                            "id": 1300000000104
                        },
                        "posId": 1300000000116,
                        "jobNum": "600309",
                        "posLevel": "E2",
                        "posTitle": "其他",
                        "id": 1300000000119
                        },
                        {
                        "realName": "用户10",
                        "nickName": "用户10",
                        "sex": 2,
                        "age": 0,
                        "joinDate": "2023-03-13 00:00:00",
                        "turnDate":"2003-06-13 00:00:00",
                        "liftYear":"2",
                        "nation": "汉族",
                        "phone": "18020030720",
                        "cardType": 0,
                        "idCardNum": null,
                        "address": null,
                        "orderNo": 100,
                        "status": 1,
                        "remark": null,
                        "accountType": 0,
                        "orgId": 1300000000104,
                        "sysOrg": {
                            "pid": 1300000000101,
                            "name": "财务部",
                            "code": "100103",
                            "orgType": "301",
                            "orderNo": 100,
                            "remark": "财务部",
                            "id": 1300000000104
                        },
                        "posId": 1300000000116,
                        "jobNum": "600310",
                        "posLevel": "E2",
                        "posTitle": "其他",
                        "id": 1300000000120
                        }
                    ],
                    "hasPrevPage": false,
                    "hasNextPage": true
                }}; 
                resolve(tempData);
            }, 200);
        });
    }
</script>